<!-- <p>attr-bind works!</p> -->
<h1>普通属性绑定</h1>
<p [id]="arg1">绑定ID属性</p>
<p id="{{arg1}}">绑定ID属性</p>
<input type="text" value="" (click)="arg1=$event.target.value">
<p [className]="classStr">绑定DOM属性</p>
<p className="{{classStr}}">绑定DOM属性</p>
<input type="button" value="切换a|b" (click)="classStr=classStr=='a'?'b':'a'">
<hr>
<!-- <p [name]="arg1">绑定name属性</p> -->
<!-- <p [itany]="arg1">为标签绑定自定义属性</p> 都不行-->
<p [attr.name]="arg1">为标签绑定name属性</p>
<p [attr.itany]="arg1">为标签绑定自定义属性</p>
<p attr.itany="{{arg1}}">为标签绑定自定义属性</p>
<div>{{domStr}}</div>
<div [innerHTML]="domStr"></div>
<div innerHTML="{{domStr}}"></div>
<hr>
<p id="{{null}}">插值表达式-绑定属性null</p>
<p [id]="null">属性指令-绑定属性null</p>
<p id="{{undefined}}">插值表达式-绑定属性undefined</p>
<p [id]="undefined">属性指令-绑定属性undefined</p>
<hr>
<img src="{{imgSrc}}" alt="">
<img [src]="imgSrc" alt="">
<input type="button" value="切换路劲" (click)="imgSrc='https://www.baidu.com/img/baidu_jgylogo3.gif'">
<hr>
<input type="text" disabled="{{flag}}">
<input type="text" [disabled]="flag">
<input type="button" value="切换flag" (click)="flag=!flag">
